<template>
  <section class="section sec-5" id="sec-5">
    <main>
      <div class="co-title-balls"></div>
      <h1 class="co-title">案例例子</h1>
      <div class="app-list">
        <template v-for="(app, index) in apps" :key="index">
          <div class="item">
            <div class="card">
              <img :src="app.cover" />
              <h2>{{ app.title }}</h2>
              <p>{{ app.desc }}</p>
              <div class="qrcode">
                <img :src="app.qrcode" />
              </div>
            </div>
          </div>
        </template>
      </div>
    </main>
  </section>
</template>
<script>
export default {
  name: 'co-section-5',
  data() {
    return {
      apps: [
        {
          title: '订鲜花',
          desc: '订鲜花是一个网上预订鲜花类型商城小程序，覆盖全国多个城市。让你随时随地的将鲜花送送到你想要送的爱人手中',
          qrcode: '/app1.jpg',
          cover: '/app-cover1.jpg',
        },
        {
          title: '漫莎服饰',
          desc: '服饰箱包类型商城小程序，设计非常简洁，符合品牌特征',
          qrcode: '/app2.jpg',
          cover: '/app-cover2.jpg',
        },
        {
          title: '海外购',
          desc: 'DFB口袋海外仓---连接全球免税店，开启精彩全球购物之旅',
          qrcode: '/app3.jpg',
          cover: '/app-cover3.jpg',
        },
        {
          title: '红酒尚品酩庄',
          desc: '红酒尚品酩庄官方平台，法国葡萄酒独立进口商，100%原瓶原装，同步法国价格，消费者经营制，新零售创新模式',
          qrcode: '/app4.jpg',
          cover: '/app-cover4.jpg',
        },
        {
          title: '华艺眼镜',
          desc: '眼镜销售平台平台，亮点：砍价、拼团、分销等功能',
          qrcode: '/app5.jpg',
          cover: '/app-cover5.jpg',
        },
        {
          title: 'Hi维修手机',
          desc: '免费上门手机维修回收，在线预约+全程录像+180天质保，上市公司直营品牌。',
          qrcode: '/app6.jpg',
          cover: '/app-cover6.jpg',
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.sec-5 {
  .app-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;

    .item {
      width: calc(33.33% - 30px);
      flex-shrink: 0;
      flex-grow: 0;
      box-sizing: border-box;
      margin-right: 40px;
      margin-bottom: 40px;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .card {
        background-color: #fff;
        border-radius: 20px;
        position: relative;
        box-sizing: border-box;
        padding: 16px;
        color: #000;
        overflow: hidden;
        cursor: pointer;

        & > img {
          display: block;
          border-radius: 14px;
          width: 100%;
          height: 200px;
          object-fit: cover;
        }

        & > h2 {
          font-size: 20px;
          font-weight: bold;
          margin-top: 14px;
        }

        & > p {
          font-size: 14px;
          line-height: 1.5;
          color: #3d3d3d;
          margin-top: 8px;
          height: 40px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:hover {
          .qrcode {
            opacity: 1;
          }
        }

        .qrcode {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          pointer-events: none;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.2s linear;

          img {
            display: block;
            width: 240px;
            height: 240px;
            border-radius: 200px;
            box-sizing: border-box;
            padding: 20px;
            overflow: hidden;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .sec-5 {
    .app-list {
      justify-content: space-between;
      .item {
        width: 100%;
        margin-right: 0;

        .card {
          & > img {
            height: 350px;
          }
        }
      }
    }
  }
}
</style>
